<div id="pm_settings" class="vpn-container">
    <div class="settings">
        <div ng-if="vpnStatus !== 1" class="row">
            <section class="pm_form">
                <header-block class="settingsVpn-header-about">
                    <h2
                        class="settingsVpn-title-about"
                        translate
                        translate-context="Title">ProtonVPN</h2>
                </header-block>
                <p ng-if="!hasPaidVpn" class="alert alert-info alert-flex">
                    <span translate-context="Info" translate>You are using ProtonVPN Free. Upgrade to ProtonVPN Plus to get faster speeds and better privacy.</span>
                    <a ui-sref="secured.dashboard({scroll: true})" class="pm_button primary" translate-context="Action" translate>Upgrade plan now</a>
                </p>
                <p ng-if="vpnStatus === 0" class="alert alert-info" translate-context="Info" translate>Your account is currently not eligible for ProtonVPN access. If you are part of an Organization, please contact your account administrator.</p>
                <p ng-if="vpnStatus === 2" class="alert alert-info" translate-context="Info" translate>Your VPN account has not yet been activated, go to <a href="https://account.protonvpn.com/signup" target="_blank">https://account.protonvpn.com/signup</a> to sign up and activate your account.</p>
                <p ng-if="vpnStatus === 3" class="alert alert-info" translate-context="Info" translate>Your ProtonVPN account request has been received. You're already on the waitlist, we'll contact you once capacity becomes available.</p>
            </section>
        </div>
        <div ng-if="vpnStatus === 1">
            <section class="vpn-ressourcesSection-container">
                <header-block>
                    <h2 class="vpn-ressourcesSection-title" translate-context="Title" translate>Getting started with ProtonVPN</h2>
                </header-block>
                <p class="alert alert-info" translate-context="Select your type of OS" translate>Select your client below to get started with ProtonVPN</p>
                <vpn-ressources></vpn-ressources>
            </section>

            <div class="row pm_grid">
                <section class="pm_form col-1-2">
                    <header-block class="settingsVpn-header-login">
                        <h2
                            class="settingsVpn-title-login"
                            translate
                            translate-context="Title">ProtonVPN</h2>
                    </header-block>

                    <p class="alert alert-info" translate-context="Info" translate>Use the following credentials to log into the <a href="https://protonvpn.com/download" target="_blank">ProtonVPN native clients</a>.</p>
                    <div class="clearfix">
                        <div class="col-4-8">
                            <label translate-context="Label" translate>Proton Username</label>
                        </div>
                        <div class="col-4-8">
                            <label class="bold">{{ VPNLogin }}</label>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="col-4-8">
                            <label translate-context="Label" translate>Password</label>
                        </div>
                        <div class="col-4-8">
                            <label class="bold" translate-context="Info" translate>Same as ProtonMail login password</label>
                        </div>
                    </div>
                </section>
                <open-vpn-section></open-vpn-section>
            </div>
            <div class="row pm_grid">
                <section class="pm_form col-1-2">

                    <header-block class="settingsVpn-header-resources">
                        <h2
                            class="settingsVpn-title-resources"
                            translate
                            translate-context="Title">ProtonVPN Resources</h2>
                    </header-block>

                    <div class="clearfix">
                        <div class="col-4-8">
                            <label translate-context="Label" translate>Download ProtonVPN</label>
                        </div>
                        <div class="col-4-8">
                            <a href="https://protonvpn.com/download" target="_blank" class="pm_button link" translate-context="Link" translate>Download Page</a>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="col-4-8">
                            <label translate-context="Label" translate>ProtonVPN Homepage</label>
                        </div>
                        <div class="col-4-8">
                            <a href="https://protonvpn.com" target="_blank" class="pm_button link" translate-context="Link" translate>Homepage</a>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="col-4-8">
                            <label translate-context="Label" translate>Get Support for ProtonVPN</label>
                        </div>
                        <div class="col-4-8">
                            <a href="https://protonvpn.com/support" target="_blank" class="pm_button link" translate-context="Link" translate>Support Page</a>
                        </div>
                    </div>
                </section>
                <section class="col-1-2"></section>
            </div>
        </div>
    </div>
</div>
